<template>
  <div class="container OrderList">
    <el-tabs v-model="activeTab" @tab-click="callbackTab">
      <el-tab-pane v-for="item in tabPane" :label="item.tabName" :key="item.key" :name="item.key">
        <order-table v-if="activeTab === item.key" :tableStatus="activeTab"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import OrderTable from "@/components/Common/OrderTable";
export default {
  name: 'tabs',
  components: {
    OrderTable
  },
  data() {
    return {
      activeTab: '1',
      tabPane: [
        { tabName: "处理成功", key: '1' },
        { tabName: "未处理", key: '0' },
        { tabName: "处理异常", key: '-1' }
      ]
    }
  },
  methods: {
    callbackTab(tab){
      this.activeTab = tab.name;
      window.localStorage.setItem('transactionTab',this.activeTab);
    }
  },
  created() {
    this.activeTab = window.localStorage.getItem('transactionTab') || '1';
  }
}

</script>
<style lang="scss">
.OrderList .el-tabs__nav-wrap {
  padding: 0 20px ;
}
.OrderList {
  #tab-1,#tab-0,#tab--1 {
    font-weight: bold;
  }
}
</style>

